⚡ 30 秒速记

• 核心判断：理解原理要建立输入、状态变化、输出和失败边界，而不是只记 API 与结论
• 原理主线：围绕 「高阶组件（HOC）：最经典的组件逻辑复用」、「Render Props：逻辑复用的另一」、「有状态组件与无状态组件：“单一职责”原则」 建立输入、状态变化与输出之间的因果关系
• 文章范围：讲解了 React 中的高阶组件（HOC）等设计模式，介绍了其原理、实现方式及在实际开发中如何复用组件逻辑，帮助开发者更好地理解和应用 React 设计思想。
• 边界与代价：文章中的实现通常有版本和场景前提，迁移到当前项目时必须先核对运行环境与依赖
• 工程落地：面试回答按核心机制、执行链路、边界反例和工程验证展开，最后说明取舍

React 中的设计模式，本质上是在控制变化范围的同时复用组件逻辑。 HOC 通过函数包裹组件统一注入能力，render props 则把数据适配权交给调用方，因此面对不同属性名时更灵活。数据处理和界面渲染也应尽量拆到有状态组件与无状态组件中，让两类变化互不牵连。实际开发中我一般优先考虑自定义 Hook，因为它能减少嵌套和属性冲突；但维护旧类组件时，HOC 与 render props 仍有价值。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

高阶组件（HOC）：最经典的组件逻辑复用方式

什么是高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。——React 官方

高阶函数的概念：接收函数作为输入，或者输出另一个函数的一类函数，就是高阶函数。

相应的，高阶组件指的就是参数为组件，返回值为新组件的函数。没错，高阶组件本质上是一个函数。下面是一个简单的高阶组件示例：

const withProps = (WrappedComponent) => {
    const targetComponent = (props) => (
        <div className="wrapper-container">
            <WrappedComponent {...props} />
        </div>
    );
    return targetComponent;
};